<template>
  <div id="qr_coupon">
    <c-title :hide="false" text="优惠券"></c-title>
    <div class="receive-main">
      <coupon-info :dataInfo="datas" :image="icon">
        <template #shareBtn>
          <div  
            @click="selectedcoupon"
            class="coupon-btn"
            v-if="(!coupon_sn && datas.api_availability != 3) || datas.bind_coupon_wait_get != '-1'">
            立即领取
          </div>
          <div class="btn btnNone" v-else>
            立即领取
          </div>
        </template>
        <template #desc>
          <div class="desc-content">
            <p>有效期：{{datas.time_start}}--{{datas.time_end}}</p>
            <p  v-if="coupon_sn">
              <span>使用范围</span>
              <span>{{ datas.coupon_type_name }}</span>
            </p>
            <div class="content" v-if="datas.description && !coupon_sn">
              <p>领券说明：</p>
              <p v-html="datas.content || datas.description"></p>
            </div>
          </div>
        </template>
      </coupon-info>
      <!--适用商品-->
      <div class="apply-goods" v-if="goods.length > 0 && !coupon_sn">
        <div class="apply-head flex-a-c flex-j-sb">
          <h3>适用商品</h3>
          <p class="flex-a-c" @click.stop v-clipboard:copy="copy_value" v-clipboard:success="onCopy"><span class="iconfont icon-fuzhi"></span>复制商品文案</p>
        </div>
        <div class="goods-list">
          <block v-for="item in goods" :key="item.id" >
            <div class="goods-item flex" @click="toDetail(item.id)">
              <div class="left">
                <van-image
                  width="90px"
                  height="90px"
                  radius="15px"
                  :src="item.thumb"
                />
              </div>
              <div class="wrap flex-j-sb">
                <h3 class="ell">{{ item.title }}</h3>
                <div class="goods-price">
                  <p>现价：<span class="present-price">{{ $i18n.t("money") }}{{ item.price }}</span></p>
                  <p>券后价：<span>{{ $i18n.t('money') }}{{ item.deduct_price.toFixed(2) }}</span></p>
                </div>
              </div>
            </div>
          </block>
          
        </div>
      </div>
      <div class="mb50"></div>
    </div>
    
    <div class="posbtn" @click="toStore" v-if="coupon_sn">
      <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/couponV2/coupons_mycouponsbg@2x.png" alt="" />
    </div>
  </div>
</template>

<script>
import qr_coupon_controller from './coupon_independent_share_controller';
export default qr_coupon_controller;
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 定义显示的行数 */
  overflow: hidden;
}
.content ::v-deep  img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
}
.goods-item ::v-deep .van-image {
  display: block!important;
}
.receive-main {
  height: auto;
  min-height: 100vh;
  background: linear-gradient(178deg, var(--themeBaseColor) 0%,var(--themeBaseColor) 3.125rem, #F5F5F5 12.5rem, #F5F5F5 100%);
  padding:3rem 0.9375rem 0 0.9375rem;
  .coupon-btn {
    margin:0rem 0 1.625rem  0;
    width: 14.1875rem;
    background: var(--themeBaseColor);
    border-radius: 1.25rem;
    font-weight: 500;
    color: #FFFFFF;
    font-size: 0.9375rem;
    line-height: 0.9375rem;
    padding:0.75rem 0 ; 
  }
  .select-bg {
    background-color: #d4d4d4;
  }
  .apply-goods {
    margin:1.125rem 0 0 0;
    .apply-head {
      h3 {
        font-weight: bold;
        color: #00001C;
        font-size: 1rem;
      }
      p {
        font-weight: 400;
        color: #3B3B4A;
        font-size: 0.8125rem;
        .icon-fuzhi {
          margin:0 0.25rem 0 0;
        }
      }
    }
    .goods-list {
      margin:0.875rem 0 0 0;
      .goods-item {
        background: #FFFFFF;
        border-radius: 0.9375rem;
        padding:0.625rem;
        margin:0 0 0.625rem 0;
        .left {
          padding: 0 0.5rem 0 0;
        }
        .wrap {
          text-align: left;
          flex-direction: column;
          h3 {
            padding:0.5rem 0 0 0;
            font-size: 0.875rem;
            font-weight: 500;
            color: #00001C;
          }
          .goods-price {
            text-align: left;
            p {
              &:nth-child(1) {
                  color: #9F9F9F;
                  font-size: 0.75rem;
                  padding:0 0 0.1875rem 0;
              }
              &:nth-child(2) {
                color: #F15353;
                font-size: 0.8125rem;
                span {
                  font-weight: bold;
                  font-size: 0.9375rem;
                }
              }
            }
            .present-price {
              text-decoration:line-through;
            }
          }
        }
      }
    }
  }
  .desc-content {
    border-top:0.0625rem dashed #D6D6DC;
    padding:1.25rem 0 0.9375rem 0;
    margin:0 0.75rem;
    color: #6E6E79;
    line-height: 1.125rem;
    font-size: 0.75rem;
    text-align: left; 
  }
}
.mb50 {
  height: 3.125rem;
  clear: both;
}

.posbtn {
  position: fixed;
  bottom: 5rem;
  right:-1.25rem;
  z-index:10;
  img {
    width: 7.875rem;
  }
}
</style>
